<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less//index.less">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <ul>
                        <li></li>
                        <li>柒星社区</li>
                        <li>
                            <a href="./mine.html">
                                <img src="./img/mine.png">
                            </a>
                        </li>
                    </ul>
                </header>
            </div>    
            <div class="scroll">
                <div id="demo" class="carousel slide" data-ride="carousel">

                    <!-- 指示符 -->
                    <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    </ul>

                    <!-- 轮播图片 -->
                    <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img :src="carousel[0]"/>
                    </div>
                    <div class="carousel-item">
                        <img :src="carousel[1]">
                    </div>
                    </div>
                </div>

                <ul class="tabbar">
                    <li v-for="(item,index) in tabbar" @click="tabb(index,item.gtId)" :class="index==isActive?'tabbarSelect':'tabbarDefault'">{{item.gtName}}</li>
                </ul>
                <ul class="sorting">
                    <li v-for="(item,index) in sorting" @click="sortMethod(index)">
                        <ul>
                            <li>{{item.name}}</li>
                            <img :src="item.img" class="arrow">
                        </ul>
                    </li>
                </ul>
                <div class="content" v-for="(item,index) in content" @click="spellDeals(item.goodsId,item.goodsImage,item.goodsName,item.buyingPrice,item.spec,item.gtId)">
                    <img :src="item.goodsImage">
                    <ul>
                        <li>{{item.goodsName}}</li>
                        <li>销量：{{item.salenum}}</li>
                        <li>
                            <ul>
                                <li>￥{{item.buyingPrice}}</li>
                                <li>原价：￥{{item.price}}</li>
                            </ul>
                        </li>
                        <li>未拼到获{{item.subsidy}}元补贴</li>
                        <li>
                            <ul>
                                <li>差{{item.fewPeople}}人拼团</li>
                                <li>立即拼购</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <aside class="aside">已经到底了~</aside>
            </div>
            <div v-if="sortStatus">
                <div class="weui-mask" @click="cancelSort"></div>
                <div :class="[sortIndex==0?'comprehensiveSort':'priceSort','weui-actionsheet']">
                    <div class="weui-actionsheet__title">
                        <p class="weui-actionsheet__title-text">{{sortName}}</p>
                    </div>
                    <div class="weui-actionsheet__menu">
                        <div class="weui-actionsheet__cell" v-for="(item,index) in sortMenu" @click="sortWay(index)">{{item.name}}</div>
                    </div>
                    <div class="weui-actionsheet__action" @click="cancelSort">
                        <div class="weui-actionsheet__cell" >取消</div>
                    </div>
                </div>
            </div>
            <div id="loadingToast" v-if="loadingStatus">
                <div class="weui-mask"></div>
                <div class="weui-toast">
                    <span class="weui-primary-loading weui-icon_toast">
                      <span class="weui-primary-loading__dot"></span>
                    </span>
                    <p class="weui-toast__content">加载中</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script type="module">
    import {swiper, control, goodsList} from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            carousel: [],
            tabbar: [],
            isActive: 0,
            sorting:[
                {
                    name: '综合排序',
                    img: './img/arrow.png'
                },
                {
                    name: '价格排序',
                    img: './img/arrow.png'
                }
            ],
            content:[],
            sortName: '',
            sortStatus: false,
            sortMenu: [],
            sortIndex: 0,
            gtIdIndex: null,
            loadingStatus: false
        },
        created(){
            let that = this;
                that.swiper();
                that.control();
                that.goodsList(1,null,null,null);
        },
        mounted(){
            let that = this;
                that.public.shareLink();
        },
        methods:{
            tabb(index,gtld){
                let that = this;
                    that.isActive = index;
                    that.gtIdIndex = gtld;
                    that.goodsList(gtld,null,null,null);
            },

            sortMethod(index){
                let that = this;
                    that.sortIndex = index;
                if(index == 0){
                    that.sortName = '综合排序';
                    that.sortMenu = [
                        {
                            name: '按最热开团'
                        },
                        {
                            name: '按成团数从高到底'
                        },
                        {
                            name: '按成团数从低到高'
                        }
                    ];
                    that.sortStatus = true;
                }else{
                    that.sortName = '价格排序';
                    that.sortMenu = [
                        {
                            name: '按成交价从高到底'
                        },
                        {
                            name: '按成交价从低到高'
                        }
                    ];
                    that.sortStatus = true;
                }
            },

            cancelSort(){
                let that = this;
                    that.sortStatus = false;
            },

            sortWay(index){
                let that = this;
                if(that.sortIndex == 0){
                    if(index == 0){
                        that.goodsList(that.gtIdIndex,null,1,null);
                        that.cancelSort();
                    }else if(index == 1){
                        that.goodsList(that.gtIdIndex,null,null,0);
                        that.cancelSort();
                    }else if(index == 2){
                        that.goodsList(that.gtIdIndex,null,null,1);
                        that.cancelSort();
                    }
                }else if(that.sortIndex == 1){
                    if(index == 0){
                        that.goodsList(that.gtIdIndex,0,null,null);
                        that.cancelSort();
                    }else if(index == 1){
                        that.goodsList(that.gtIdIndex,1,null,null);
                        that.cancelSort();
                    }
                }
            },

            spellDeals(goodsId,goodsImage,goodsName,buyingPrice,spec,gtId){
                let url = "./spellDeals.html?goodsId="+goodsId+"&goodsImage="+goodsImage+"&goodsName="+goodsName+"&buyingPrice="+buyingPrice+"&spec="+spec+"&gtId="+gtId;
                    window.location.href = url;
            },

            swiper(){
                let that = this;
                swiper({
                    showIndex:16
                }).then(res=>{
                    that.carousel.push(res.data[0].icon);
                    that.carousel.push(res.data[1].icon);
                }).catch(error=>{
                    console.log(error);
                })
            },

            control(){
                let that = this;
                control().then(res=>{
                    res.data.push({gtId:5,gtName:'新人专区'});
                    that.tabbar = res.data;
                }).catch(error=>{
                    console.log(error);
                })
            },

            goodsList(gtld,price,heat,team){
                let that = this;
                goodsList({
                    page: '1',
                    rows: '20',
                    gtId: gtld,
                    price: price?price:null,
                    heat: heat?heat:null,
                    team: team?team:null
                }).then(res=>{
                    that.loadingStatus = true;
                    if(res.code == 0){
                        that.content = res.data.goodsCorpsList;
                        setTimeout(()=>{
                            that.loadingStatus = false;
                        },2000)
                    }
                }).catch(error=>{

                })
            },
        }

    })

</script>
